import React, { Component } from 'react';
class App5 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            num:1,
            num2:4,
            ary:[1,2,3,4]
        }
    }
    render() { 
        const {num,num2,ary}=this.state;
        // List函数
        let list=ary.map((item,i)=><List key={i} txt={item}/>)
        return (
            <>
            <div>父组件</div>
            <hr/>
            {/* 对象的形式传参 */}
            <Child {...{
                pnum:num,
                punm2:num2,
                pary:ary
            }}/>
            {/* 普通的多个传参的方式 */}
            {/* <Child
            pnum={num}
            pnum2={num2}
            pary={ary}
            /> */}
                <ul>{list}</ul>
            </>
        );
    }
}
// 函数组件就是通过props建立连接
function List(props){
    return (<li>{props.txt}</li>)
}
// props={pnum,pnum2,pary} 
// function Child ({pnum,pnum2}){
//     return (
//         <>
//         子组件{pnum}{pnum2}
//         </>
//     )
// }


// class类组件有this
class Child extends Component{
    constructor (props){
        super(props);
            this.state={}
    }
    render(){
        const {pnum}=this.props;
        return(
            <h2>子组件{pnum}</h2>
        )
    }
}
 
export default App5;